import classNames from 'classnames';
import { EditorModels } from '../../ts/EditorModels';
import './EditorHeader.scss';
import { ITransformMode, IAxisShowMode } from '@/interface/common';
import * as React from 'react';
import { Tooltip } from 'antd';
import EditorHelperModal from './components/EditorHelper/EditorHelperModal';
export interface IEditorHeaderProps {
  editorScene: EditorModels;
}

export const EditorHeader = React.forwardRef<HTMLDivElement, IEditorHeaderProps>((props, ref) => {
  const { editorScene } = props;
  const [visibleHelperModal, setVisibleHelperModal] = React.useState(false);
  let [transformList, setTransfromList] = React.useState<
    {
      mode: ITransformMode;
      cnName: string;
      iconFontClass: string;
      component: (props: React.HTMLProps<HTMLDivElement>) => JSX.Element;
    }[]
  >([
    {
      mode: 'translate',
      cnName: '平移(T)',
      iconFontClass: 'icon-move',
      component: (props) => <span {...props} />,
    },
    {
      mode: 'rotate',
      cnName: '旋转(R)',
      iconFontClass: 'icon-xuanzhuan',
      component: (props) => <span {...props} />,
    },
    {
      mode: 'scale',
      cnName: '缩放(S)',
      iconFontClass: 'icon-suofang',
      component: (props) => <span {...props} />,
    },
  ]);
  let [axisList, setAxisList] = React.useState<
    {
      mode: IAxisShowMode;
      cnName: string;
      iconFontClass: string;
      component: (props: React.HTMLProps<HTMLDivElement>) => JSX.Element;
    }[]
  >([
    {
      mode: 'showX',
      cnName: 'X轴(X)',
      iconFontClass: 'icon-xalxe',
      component: (props) => <span {...props} />,
    },
    {
      mode: 'showY',
      cnName: 'Y轴(Y)',
      iconFontClass: 'icon-zaxle',
      component: (props) => <span {...props} />,
    },
    {
      mode: 'showZ',
      cnName: 'Z轴(Z)',
      iconFontClass: 'icon-yaxle',
      component: (props) => <span {...props} />,
    },
  ]);
  /** 改变操作模型方式 */
  const updateTransformControlsMode = (mode: ITransformMode) => {
    editorScene.transformControls.setMode(mode);
  };
  /** 改变哪些轴可以操作 */
  const updateAxis = (mode: IAxisShowMode) => {
    editorScene.updateView();
    editorScene.transformControls[mode] = !editorScene.transformControls[mode];
  };

  /** 撤销 */
  const undo = () => {
    if (editorScene.histroy.undos.length === 0) return;
    editorScene.histroy.undo();
    editorScene.updateView();
  };
  /** 恢复 */
  const redo = () => {
    if (editorScene.histroy.redos.length === 0) return;
    editorScene.histroy.redo();
    editorScene.updateView();
  };

  /** 键盘事件 */
  const keyboardHandler = (event: KeyboardEvent) => {
    // 按下了ctrl
    const keyboardCtrlObject: { [key: string]: Function } = {
      z: undo,
      y: redo,
    };
    // 正常的情况
    const keyboardObject: { [key: string]: Function } = {
      r: () => {
        updateTransformControlsMode('rotate');
      },
      s: () => {
        updateTransformControlsMode('scale');
      },
      t: () => {
        updateTransformControlsMode('translate');
      },
      x: () => {
        updateAxis('showX');
      },
      y: () => {
        updateAxis('showY');
      },
      z: () => {
        updateAxis('showZ');
      },
    };
    if (event.ctrlKey && keyboardCtrlObject[event.key]) {
      return keyboardCtrlObject[event.key]();
    }
    if (keyboardObject[event.key]) {
      return keyboardObject[event.key]();
    }
  };
  React.useEffect(() => {
    document.addEventListener('keyup', keyboardHandler);
    return () => {
      document.removeEventListener('keyup', keyboardHandler);
    };
  }, []);
  return (
    <>
      <div className="editorHeaderPage" ref={ref}>
        <div className="left">
          <div className="name">washhui家具编辑器</div>
        </div>
        <div className="center">
          <div className="history">
            <Tooltip title="撤销(Ctrl+Z)">
              <span
                onClick={() => undo()}
                className={classNames({
                  iconfont: true,
                  'icon-withdraw': true,
                  disabled: editorScene.histroy.undos.length === 0,
                })}
              ></span>
            </Tooltip>
            <Tooltip title="恢复(Ctrl+Y)">
              <div
                onClick={() => redo()}
                className={classNames({
                  iconfont: true,
                  'icon-withdraw': true,
                  disabled: editorScene.histroy.redos.length === 0,
                })}
                style={{ transform: 'scaleX(-1)' }}
              ></div>
            </Tooltip>
          </div>
          <div className="transfrom">
            {transformList.map((item) => (
              <Tooltip title={item.cnName} key={item.mode}>
                {item.component({
                  className: classNames({
                    [item.iconFontClass]: true,
                    iconfont: true,
                    active: editorScene.transformControls.getMode() === item.mode,
                  }),
                  onClick: () => updateTransformControlsMode(item.mode),
                })}
              </Tooltip>
            ))}
          </div>
          <div className="axis">
            {axisList.map((item) => (
              <Tooltip title={item.cnName} key={item.mode}>
                {item.component({
                  onClick: () => {
                    updateAxis(item.mode);
                  },
                  className: classNames({
                    [item.iconFontClass]: true,
                    iconfont: true,
                    active: editorScene.transformControls[item.mode],
                  }),
                })}
              </Tooltip>
            ))}
          </div>
          <div className="tips">
            <Tooltip title="帮助(H)">
              <div
                className="iconfont icon-bangzhu"
                onClick={() => {
                  setVisibleHelperModal(true);
                }}
              ></div>
            </Tooltip>
          </div>
        </div>
        <div className="right"></div>
      </div>
      <EditorHelperModal
        visible={visibleHelperModal}
        changeVisible={(visible) => {
          setVisibleHelperModal(visible);
        }}
      ></EditorHelperModal>
    </>
  );
});
